<template>
<div class="sp" v-if="isshop">
  <div class="bg" @click="close">
  </div>
  <div class="shop">
    <label>购物车</label>
    <div class="incart">
      <ShopCartin></ShopCartin>
    </div>
  </div>
</div>
</template>

<script>
import ShopCartin from './ShopCartin.vue'
export default {
  computed: {
    isshop () {
      return this.$store.state.isshop
    }
  },
  methods: {
    close: function () {
      this.$store.commit('SHOPUP')
    }
  },
  components: { ShopCartin }
}
</script>

<style lang="less" scoped>
.shop {
    background: rgb(255, 255, 255);
    width: 100vw;
    height: 50vh;
    position: fixed;
    z-index: 8;
    bottom: 0;
    border-radius: 5% 5% 0 0;
    display: flex;
    flex-direction: column;
}
.incart{
  height: 35vh;
  overflow-y: scroll;
}
.shop label{
  position: relative;
  align-self: center;
  color: grey;
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 1px;
}
.bg {
    background-color: rgba(0, 0, 0, 0.397);
    width: 100vw;
    height: 100vh;
    z-index: 7 ;
    position: fixed;
}
</style>
